<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
            width: 500px;
            margin: auto;
            background-color: rgb(245, 237, 226);
        }

        .img-cpn {
            width: 500px;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .shopList {
            width: 200px;
            background-color: white;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2 style="text-align: center;">点击的商品是：{{item_name}}</h2>
        <img-cpn :itemlist="itemList" @clickname="getDataName"></img-cpn>
    </div>
    <template id="imgCpn">
        <div class="img-cpn">
            <div v-for="(item,index) in itemlist" :key="item.id" class="shopList" @click="getClickData(index)">
                <div>
                    <p style="text-align: center;"><img :src="item.imgUrl" alt=""></p>
                </div>
                <p style="margin-left: 20px;">{{item.name}}</p>
                <p style="margin-left: 20px;"><span>{{item.price | setPrice}}</span>起 <button>看相似</button></p>
            </div>
        </div>
    </template>
    <script src="../vue/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    itemList: [{
                            id: 1,
                            name: "小米11Ultra，开启影像新时代",
                            imgUrl: "./img/4.png",
                            price: 5999,
                        },
                        {
                            id: 2,
                            name: "智能定时|用电统计|过载保护",
                            imgUrl: "./img/6.png",
                            price: 49,
                        },
                        {
                            id: 3,
                            name: "小身材也有大智慧",
                            imgUrl: "./img/7.png",
                            price: 49,
                        },
                        {
                            id: 4,
                            name: "Redmi Note 9 4G 6000mAh大电量,...",
                            imgUrl: "./img/8.png",
                            price: 999,
                        },
                        {
                            id: 5,
                            name: "青年“无须”新选择",
                            imgUrl: "./img/9.png",
                            price: 99,
                        },
                        {
                            id: 6,
                            name: "全面屏更多可能",
                            imgUrl: "./img/11.png",
                            price: 299,
                        }
                    ],
                    item_name:""
                }
            },
            components: {
                'img-cpn': {
                    template: '#imgCpn',
                    props: ['itemlist'],
                    data() {
                        return {

                        }
                    },
                    methods:{
                        getClickData(index){
                            let clickName = this.itemlist[index].name;
                            this.$emit('clickname',clickName);
                        }
                    },
                    filters: {
                        setPrice(val) {
                            return "￥" + val.toFixed(2)
                        }
                    }
                }
            },
            methods:{
                getDataName(val){
                    this.item_name = val;
                }
            }
        })
    </script>
</body>

</html>